<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		<meta name=renderer  content=webkit>

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<!--插件基本框架-->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" />
		
		<!--页面布局样式-->
		<link rel="stylesheet" type="text/css" href="css/swiperStyle.css" />
		
		<!-- ie 兼容性样式 -->
		<link rel="stylesheet" type="text/css" href="../css/jianrong.css" />
		
		<!-- 本页面css -->
		<link rel="stylesheet" type="text/css" href="css/detail.css" />

		<link rel="stylesheet" type="text/css" href="css/renewManage.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div style="position: relative;" class="orderDetail-wrapper table-wrapper section" v-cloak>

			<div class="orderList-content-wrapper table-content-wrapper noPay">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">续费管理</span>
				</div>
				<div class="form-wrapper header">

					<div class="from-title-wrapper">
						<span class="from-title">
						续费管理</span>
					</div>

					<div class="renewModule-wrapper fboxRow">
						产品：
						<div @click="handleClickSelectProductType(item)" :class="{'deep':item.value === renewActiveType}" v-for="(item,index) in renewTypeGroup"  class="yzButton mr-10">{{item.label}} <span class="num" v-if="item.value !== 'all'">({{item.num === undefined ? 0 : item.num}})</span></div>
					</div>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
							  <el-select v-model="activetimeselect"  placeholder="请选择筛选到期时间">
									<el-option
									  v-for="item in timeGroup"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
							  </el-select>
						
						
						<el-input maxlength="50" @keyup.enter.native="searchSafegroupBykeyword" class="button-wrapper-right"
						 style="width: 220px" placeholder="请输入实例ID/实例名称" v-model="searchkeywords">
							<i @click="searchSafegroupBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>
					 <el-table
						ref="refTable"
					    :data="tableData"
					    style="position: relative;">
					    <el-table-column type="expand" class="">
					      <template slot-scope="props">
							  <i class="table-flag"></i>
							  <div class="yzTable-wrapper">
									<div class="th-wrapper  fboxRow">
										<div class="th-item">产品类型</div>
										<div class="th-item">名称/ID</div>
										<div class="th-item config">产品配置</div>
										<div class="th-item">到期时间</div>

									</div>
									<div class="tr-wrapper fboxRow">
										<!--产品类型  -->
										<div class="tr-item">{{props.row.typeLabel}}</div> 
										<!-- 名称/ID  -->
										<div class="tr-item">
											<p>{{props.row.name}}</p>
											<p style="margin-top: 10px;display: inline-block;">ID:{{props.row.id}}</p>
										</div>
										<!-- 产品配置 -->
										<div class="tr-item config">
											<el-row>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">产品名称：</span>
														<span class="config-val">{{props.row.name}}</span>
													</div>
												
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">ID：</span>
														<span class="config-val">{{props.row.id}}</span>
													</div>
												</el-col>
												
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">地域：</span>
														<span class="config-val">{{props.row.area}}</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">IP：</span>
														<span class="config-val">{{props.row.ipNum}}个</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">CPU：</span>
														<span class="config-val">{{props.row.cpNum}}核</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">数据盘：</span>
														<span class="config-val">{{props.row.dataDisk}}G</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">内存：</span>
														<span class="config-val">{{props.row.memory}}G</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">带宽：</span>
														<span class="config-val">{{props.row.bindWith}}M</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">SSD：</span>
														<span class="config-val">{{props.row.ssd}}</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">操作系统：</span>
														<span class="config-val">{{props.row.systemMirror}}</span>
													</div>
												</el-col>
											</el-row>
										</div>
										<!-- 到期时间 -->
										<div class="tr-item">
											<span> {{props.row.expireTime}}</span>
										</div>

									</div>
							  </div>
					      </template>
					    </el-table-column>
					    <el-table-column
					      label="产品类型"
					      prop="typeLabel">
					    </el-table-column>
					    <el-table-column
					      label="名称/ID"
					      prop="name">
						  <template slot-scope="scope">
							  <p>{{scope.row.name}}</p>
							  <p style="margin-top: 10px;display: inline-block;">ID:{{scope.row.id}}</p>
						  </template>
					    </el-table-column>
						<el-table-column
						  label="地域"
						  prop="area">
							<template slot-scope="scope">
								 {{scope.row.area}}
							</template>
						  
						</el-table-column>
						
						<el-table-column
						  label="产品配置"
						  width="300"
						  >
						  <template slot-scope="scope">
							  <p class="extand configInfo">
								  cpu：{{scope.row.cpNum}}核 内存：{{scope.row.memory}}G SSD：{{scope.row.SSD}}G IP数：{{scope.row.ipNum}}个
							  </p>
						  	 <span class="extand detailButton" @click="expandtableRow(scope.row)">详情</span>
						  </template>
						</el-table-column>
						
					    <el-table-column
					      label="到期时间"
					      prop="expireTime">
						   <template slot-scope="scope">
							   {{scope.row.expireTime}}
							</template>
					    </el-table-column>

						<el-table-column
						  label="操作"
						 >
						   <template slot-scope="scope">
							  <span @click="renewProduct(scope.row)" style="color: #6462F3;cursor: pointer;">续费</span>
							</template>
						</el-table-column>
					  </el-table>
						<div class="pagination-wrapper">
						  <div class="total-wrapper">
							  <span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
									<el-option
									  v-for="item in pageOptions"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
							  </el-select>
						  </div>
						  <el-pagination
							:page-size="pageInfo.pagesize"
							@size-change="handleSizeChange"
							
							@current-change="handleCurrentChange"
							:current-page="pageInfo.currentPage"
							layout="prev, pager, next, jumper"
							:pager-count="4"
							:total="pageInfo.totalSize">
						  </el-pagination>
						</div>
				</div>

			</div>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>

		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderDetail-wrapper',
				data: function() {
					return {
						// 新增
						renewActiveType: 'all', // 选中的产品类型默认
						renewTypeGroup: [{  // 续费产品类型
							value:'all',
							label: '全部',
							num: 20
						},{
							value:'yun',
							label: '云服务器',
							num: 30
						},{
							value:'general',
							label: '物理服务器',
							num: 10
						},{
							value:'virtualhost',
							label: '虚拟主机',
							num: undefined
						},{
							value:'domainName',
							label: '域名',
							num: undefined
						}],
						renewTimeRange:[] , // 续费周期选中范围
						searchkeywords: undefined, // 搜索关键字
						activetimeselect: undefined, // 时间选中的周期 默认为不选中 即undefined
						timeGroup:[{
							value: '7day',
							label: '7天内到期'
						},{
							value: '15day',
							label: '15天内到期'
						},{
							value: '30day',
							label: '30天内到期'
						},{
							value: '60day',
							label: '两个月内到期'
						}],
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 81
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						tableData: [{
								price:2000.93,
								buyTimePeriod:'6个月',
								buyNum:1, // 购买数量
						        id: '123ghafsGZf145',
						        name: '江先生', // 名称
								typeLabel:'虚拟主机', // 产品类型
								typeValue: 'virtualhost',
								area:'香港',// 地域
								cpNum:3, // cpu 核心数
								memory:50, // 内存
								ipNum:1, // IP个数
								dataDisk:100, // 数据盘
								bindWith:100, // 带宽
								ssd:50, //SSD
								systemMirror:'Centons 1.0',//镜像 
								expireTime: '2020-12-31', // 到期时间
								expireDay:14, // 距离到期时间
								},{
									price:2000.93,
									buyTimePeriod:'6个月',
									buyNum:1, // 购买数量
									id: '2324234',
									name: '杨先生', // 名称
									typeLabel:'物理服务器', // 产品类型
									typeValue: 'geneal',
									area:'香港',// 地域
									cpNum:3, // cpu 核心数
									memory:50, // 内存
									ipNum:1, // IP个数
									dataDisk:100, // 数据盘
									bindWith:100, // 带宽
									ssd:50, //SSD
									systemMirror:'Centons 1.0',//镜像 
									expireTime: '2020-12-31', // 到期时间
									expireDay:14, // 距离到期时间
								},{
									price:2000.93,
									buyTimePeriod:'6个月',
									buyNum:1, // 购买数量
									id: '4343445',
									name: '江先生', // 名称
									typeLabel:'云主机', // 产品类型
									typeValue: 'yun',
									area:'香港',// 地域
									cpNum:3, // cpu 核心数
									memory:50, // 内存
									ipNum:1, // IP个数
									dataDisk:100, // 数据盘
									bindWith:100, // 带宽
									ssd:50, //SSD
									systemMirror:'Centons 1.0',//镜像 
									expireTime: '2020-12-31', // 到期时间
									expireDay:14, // 距离到期时间
								}
							],
					}
				},

				methods: {
					// 续费产品
					renewProduct: _throttle(function(row) {
						console.log('续费的产品是' + row.id)
						window.open('renewDetail.html?id=' + row.id, '_self')
					}),
					
					// 点击选中产品类型的方法
					handleClickSelectProductType: _throttle(function(item) {
						this.renewActiveType = item.value
						console.log('选中的产品类型 为' + this.renewActiveType)
					},100),
					
					searchSafegroupBykeyword:_throttle(function(){
						if (this.searchkeywords === '' || this.searchkeywords === undefined) {
							return
						}
						console.log('搜索续费数据', this.searchkeywords)
					},300),
					
					handleSizeChange:function(e) {
						console.log(e)
					},
					handleCurrentChange:function(val) {
						console.log('当前页为' + val)
					},
					// 扩展行的方法
					expandtableRow:_throttle(function(row) {
						 this.$refs.refTable.toggleRowExpansion(row)
					}),
				},
				mounted: function() {
					
				}

			})
		</script>
	</body>
</html>

